import { Swiper, SwiperSlide } from 'swiper/react'
import { Autoplay } from 'swiper/modules';
import style from './index.module.scss'
import 'swiper/css';
import { swiperType } from '@/type/home';

const Swipers = (props: {swiperList: swiperType[]}) => {
  return (
    <Swiper className={style.swiperBox} slidesPerView={4} spaceBetween={30} modules={[Autoplay]} loop={true} autoplay={{ delay: 1500, disableOnInteraction: false }}>
      {
        props.swiperList.map((item: swiperType) => {
          return (
            <SwiperSlide key={item.id}>
              <img src={item.cover_url}/>
              <p className={style.title}>{item.title}</p> 
            </SwiperSlide>
          )
        })
      }  
    </Swiper>
  )
}

export default Swipers